<template>
  <div class="page-container">
    <SearchForm
      :search-list="searchList"
      :search-params="searchParams"
      @search="onSearch"
      @reset="onReset"
    />
    <el-form>
      <el-form-item>
        <div style="text-align: right">
          <el-button type="primary" @click="exportData">导出</el-button>
        </div>
      </el-form-item>
    </el-form>
    <div class="table-box">
      <el-table
        v-loading="loading"
        height="100%"
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" >
          <template slot-scope="scope">
            <el-image v-if="item.type === 'image'" :preview-src-list="(scope.row.image || '').split(',')" :src="scope.row.image" style="width: 30px;height: 30px;border: 1px solid #3CAA49" fit="contain" />
            <span v-else-if="item.type === 'select'">
              {{ item.mapping[scope.row[item.prop]] }}
            </span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="物流单号"  width="150px">
          <template slot-scope="scope">
              <el-input v-model="scope.row.track_no" @blur="updateTrackNo(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="发货状态"  width="150px">
          <template slot-scope="scope">
            <el-select v-model="scope.row.status" @change="updateStatus(scope.row)">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>
    <Add ref="addFormRef" @get-page="initData" />
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { http } from '@/api'
import Add from './add.vue'
import {exportExcel} from "@/excel/util";
export default {
  name: 'Banner',
  components: {
    Add
  },
  mixins: [crud],
  data() {
    return {
      request: http.lotteryRecord,
      statusList: [
        { label: '未发货', value: 0 },
        { label: '已发货', value: 1 }
      ],
      searchList: [
        {
          label: '发货状态',
          key: 'status',
          name: 'select',
          options: [
            { name: '未发货', value: 0 },
            { name: '已发货', value: 1 }
          ]
        }
      ],
      searchParams: {
        status: ''
      },
      columns: [
        { prop: 'productName', label: '产品' },
        { prop: 'nickname', label: '收货人' },
        { prop: 'phone', label: '手机号' },
        { prop: 'id_no', label: '身份证号码' },
        { prop: 'address', label: '收货地址' },
        { prop: 'created_at', label: '中奖时间' }
      ],
      tableData: [
      ]
    }
  },
  methods: {
    exportData() {
      http.lotteryRecord.list().then(res => {
        this.formatTableData(res.data)
        const tableData = res.data
        const columnList = [
          { key: 'productName', title: '奖品名称', width: 15 },
          { key: 'nickname', title: '收货人', width: 15 },
          { key: 'id_no', title: '身份证号码', width: 15 },
          { key: 'phone', title: '手机号' , width: 15},
          { key: 'address', title: '收货地址', width: 20 },
          { key: 'track_no', title: '物流单号', width: 15 },
          { key: 'statusName', title: '发货状态', width: 10 },
          { key: 'created_at', title: '中奖时间', width: 10 }
        ]
        console.log(columnList, tableData)
        exportExcel(columnList, tableData, '中奖记录明细')
      })
    },
    updateTrackNo(row) {
      http.lotteryRecord.update(row.id, { track_no: row.track_no }).then(res => {
        this.$message.success('更新成功')
      })
    },
    updateStatus(row) {
      http.lotteryRecord.update(row.id, { status: row.status }).then(res => {
        this.$message.success('更新成功')
      })
    },
    formatTableData(data) {
      data.forEach(el => {
        if (el.product) {
          el.productName = el.product.name
        }
        if (el.user) {
          el.nickname = el.user.nickname
          el.phone = el.user.phone
          el.id_no = el.user.id_no
          el.address = el.user.address
        }
        el.statusName = el.status === 0 ? '未发货' : '已发货'
      })
    },
  }
}
</script>

<style scoped lang="scss">
</style>
